{% extends "base_generic.html" %}

{% block title %}Books - Local Library{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h1><i class="bi bi-book"></i> Books</h1>
    <p class="text-muted">Browse our collection of books</p>
  </div>
  
  {% if perms.catalog.add_book %}
    <a href="{% url 'book-create' %}" class="btn btn-primary">
      <i class="bi bi-plus"></i> Add Book
    </a>
  {% endif %}
</div>

<!-- Search Form -->
<div class="card mb-4">
  <div class="card-body">
    <form method="get" class="row g-3 align-items-end">
      <div class="col-md-8">
        <label for="search" class="form-label">Search Books</label>
        <input type="text" class="form-control" name="search" id="search" 
               placeholder="Search by title, author..." value="{{ request.GET.search }}">
      </div>
      <div class="col-md-4">
        <button type="submit" class="btn btn-outline-primary w-100">
          <i class="bi bi-search"></i> Search
        </button>
      </div>
    </form>
  </div>
</div>

{% if book_list %}
  <div class="row g-4">
    {% for book in book_list %}
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">
              <a href="{{ book.get_absolute_url }}" class="text-decoration-none">
                {{ book.title }}
              </a>
            </h5>
            <p class="card-text text-muted">
              <i class="bi bi-person"></i> {{ book.author }}
            </p>
            <p class="card-text">
              <small class="text-muted">
                {{ book.summary|truncatewords:15 }}
              </small>
            </p>
            
            {% if book.genre.all %}
              <div class="mb-3">
                {% for genre in book.genre.all %}
                  <span class="badge bg-secondary me-1">{{ genre.name }}</span>
                {% endfor %}
              </div>
            {% endif %}
            
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">
                <i class="bi bi-hash"></i> {{ book.isbn }}
              </small>
              {% if perms.catalog.change_book %}
                <div class="btn-group" role="group">
                  <a href="{% url 'book-update' book.pk %}" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-pencil"></i>
                  </a>
                  <a href="{% url 'book-delete' book.pk %}" class="btn btn-outline-danger btn-sm">
                    <i class="bi bi-trash"></i>
                  </a>
                </div>
              {% endif %}
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <div class="d-flex justify-content-between">
              <small class="text-muted">
                Available: {{ book.bookinstance_set.all|length }}
              </small>
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">
                View Details
              </a>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% else %}
  <div class="text-center py-5">
    <i class="bi bi-book display-1 text-muted"></i>
    <h3 class="mt-3">No books found</h3>
    <p class="text-muted">
      {% if request.GET.search %}
        No books match your search criteria.
      {% else %}
        There are no books in the library yet.
      {% endif %}
    </p>
    {% if perms.catalog.add_book %}
      <a href="{% url 'book-create' %}" class="btn btn-primary">
        <i class="bi bi-plus"></i> Add First Book
      </a>
    {% endif %}
  </div>
{% endif %}

{% endblock %} 